import { Input, Row, Col, Button, Form } from 'antd';
import React from 'react';

import styles from '../Question.less';
import { submit } from './methods';

type propsType = {
  data: request.TreatiseType & {
    index: number;
  };
};

export default ({ data }: propsType) => {
  return (
    <Form className={styles.wrap} onFinish={submit({ id: data.id })}>
      <Form.Item className={styles.title} name="question_name">
        <Row wrap={false}>
          <Col>
            <span className={styles.titleID}>{data.index + 1}</span>
          </Col>
          <Col flex="auto">
            <Input
              size="large"
              placeholder={data.question_name || '未填写'}
              bordered={false}
            ></Input>
          </Col>
        </Row>
      </Form.Item>

      <Form.Item name="question_answer">
        <Row className={styles.parse}>
          <Col>
            <span>答案：</span>
          </Col>
          <Col flex="auto">
            <Input.TextArea
              style={{ height: 300 }}
              placeholder={data.question_answer || '未填写'}
            ></Input.TextArea>
          </Col>
        </Row>
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 16, span: 16 }}>
        <Button style={{ marginRight: 20 }} type="primary" htmlType="submit">
          提交
        </Button>
        <Button htmlType="reset">重置</Button>
      </Form.Item>
    </Form>
  );
};
